<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>优田儿童成长中心</title>
    <!-- Styles -->
    <link href="/static/assets/fontAwesome/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="/static/assets/css/lib/mmc-chat.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="/static/assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/nixon.css" rel="stylesheet">
    <link href="/static/assets/lib/lobipanel/css/lobipanel.min.css" rel="stylesheet">
    <link href="/static/assets/css/style.css" rel="stylesheet">
    <script src="/static/js/jquery-1.11.0.js"></script>
    <script>
        $(function () {
            $('#img_pre').hide();
            $('#file').change(function () {
                var form_data = new FormData();
                var file_info = $('#file')[0].files[0];
                form_data.append('file',file_info);
                $.ajax({
                    async:true,
                    type:'post',
                    url:'/picupload/',
                    data:form_data,
                    processData:false,
                    contentType:false,
                    success:function (data) {
                        $('#timg').attr("value",data);
                        $('#img_pre').show();
                        $('#img_pre').attr("src",data);
                    }
                });
            });
        })
    </script>
</head>

<body>
    <div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
        <div class="nano">
            <div class="nano-content">
                <ul>
                    <li>
                        <a href="/home/"><i class="ti-bar-chart"></i> 统计数据</a>
                    </li>
                    <li class="active">
                        <a href="/teacher/"><i class="ti-user"></i> 教师管理<span class="sidebar-collapse-icon ti-angle-right"></span></a>
                    </li>
                    <li>
                        <a href="/child/"><i class="ti-user"></i> 幼儿管理</a>
                    </li>
                    <li>
                        <a href="/posts/"><i class="ti-desktop"></i> 岗位管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- /# sidebar -->
    <div class="header">
        <div class="pull-left">
            <div class="logo">
                <a>
                    <img id="logoImg" src="/static/img/yt1.png" data-logo_big="/static/img/yt1.png" data-logo_small="/static/img/yt3.png" alt="Nixon" />
                </a>
            </div>
            <div class="hamburger sidebar-toggle">
                <span class="ti-menu"></span>
            </div>
        </div>
        <div class="pull-right p-r-15">
            <ul>
                <li class="header-icon dib">
                    <img class="avatar-img" src="/static/assets/images/avatar/1.jpg" alt=""/> <span
                        class="user-avatar"><span th:text="${session.username}"></span>&nbsp;&nbsp;&nbsp;<i
                        class="ti-angle-down f-s-10"></i></span>
                    <div class="drop-down dropdown-profile">
                        <div class="dropdown-content-body">
                            <ul>
                                <li><a href="/exit/"><i class="ti-power-off"></i> <span>注销</span></a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="content-wrap">
        <div class="main">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <h1>教师管理</h1>
                            </div>
                        </div>
                    </div>
                    <!-- /# column -->
                    <div class="col-lg-4 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <ol class="breadcrumb text-right">
                                    <li><a href="/add_teacher/">添加教师</a></li>
                                    <li class="active">教师管理</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->
                <div class="main-content">
                    <div class="row">
                       <div class="card alert">
                            <div class="card-header">
                                <h4>添加教师</h4>
                                <div class="card-header-right-icon">
                                    <!--<ul>
                                        <li class="card-close" data-dismiss="alert"><i class="ti-close"></i></li>
                                    </ul>-->
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="basic-elements">
                                    <form id="teacherForm">
                                        <div class="form-group">
                                            <label>姓名</label>
                                            <input type="text" class="form-control" id="tname" name="tname" placeholder="请输入教师姓名" required>
                                        </div>
                                        <div class="form-group">
                                            <label>性别</label>
                                            <select class="form-control" id="tsex" name="tsex" required>
                                                <option value="男" selected>男</option>
                                                <option value="女">女</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>年龄</label>
                                            <input type="number" class="form-control" id="tage" name="tage" placeholder="请输入教师年龄" required>
                                        </div>
                                        <div class="form-group">
                                            <label>教师类型</label>
                                            <select class="form-control" id="ttype" name="ttype">
                                                <option value="1" selected>托育老师</option>
                                                <option value="2">托管老师</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>照片</label>
                                            <input class="form-control" type="file" name="file" id="file"/>
                                            <input type="hidden" id="timg" name="timg" value=""/>
                                            <img id="img_pre" width="180" height="180" style="display:none;"/>
                                        </div>
                                        <div class="form-group">
                                            <label>教龄</label>
                                            <input type="number" class="form-control" id="tyear" name="tyear" placeholder="请输入教师教龄" required>
                                        </div>
                                        <div class="form-group">
                                            <label>专业</label>
                                            <input type="text" class="form-control" id="tspec" name="tspec" placeholder="请输入教师专业" required>
                                        </div>
                                        <div class="form-group">
                                            <label>毕业学校</label>
                                            <input type="text" class="form-control" id="tschool" name="tschool" placeholder="请输入教师毕业学校" required>
                                        </div>
                                        <div class="form-group">
                                            <label>联系方式</label>
                                            <input type="text" class="form-control" id="tphone" name="tphone" placeholder="请输入教师联系方式" required>
                                        </div>
                                        <div class="form-group">
                                            <label>个人介绍</label>
                                            <textarea class="form-control" id="tintr" name="tintr" rows="3" placeholder="请输入教师个人简介"></textarea>
                                        </div>
                                        <div class="form-group"><label>状态</label>
                                            <input type="text" class="form-control" value="正常" readonly />
                                            <input type="hidden" id="flag" name="flag" value="1" />
                                        </div>
                                        <div class="form-group">
                                            <button type="button" id="btnSubmit" class="btn btn-success">确认添加</button>
                                            <a href="/teacher/" class="btn btn-warning">返回</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                       </div>
                    </div>
                </div>
     <!-- /# main content -->Copyright &copy; 2024
 </div>
 <!-- /# container-fluid -->
</div>
<!-- /# main -->
</div>
<!-- /# content wrap -->
<script src="/static/assets/js/lib/jquery.min.js"></script>
<!-- jquery vendor -->
<script src="/static/assets/js/lib/jquery.nanoscroller.min.js"></script>
<!-- nano scroller -->
<script src="/static/assets/js/lib/sidebar.js"></script>
<!-- sidebar -->
<script src="/static/assets/js/lib/bootstrap.min.js"></script>
<!-- bootstrap -->
<script src="/static/assets/js/lib/mmc-common.js"></script>
<script src="/static/assets/js/lib/mmc-chat.js"></script>
<!--  Chart js -->
<script src="/static/assets/js/lib/chart-js/Chart.bundle.js"></script>
<script src="/static/assets/js/lib/chart-js/chartjs-init.js"></script>
<!-- // Chart js -->
<!--  Datamap -->
<script src="/static/assets/js/lib/datamap/d3.min.js"></script>
<script src="/static/assets/js/lib/datamap/topojson.js"></script>
<script src="/static/assets/js/lib/datamap/datamaps.world.min.js"></script>
<script src="/static/assets/js/lib/datamap/datamap-init.js"></script>
<script src="/static/assets/lib/lobipanel/js/lobipanel.js"></script>
<!-- // Datamap -->
<script src="/static/assets/js/scripts.js"></script>
<!-- scripit init-->
<script>
    $(document).ready(function() {
        $('#lobipanel-custom-control').lobiPanel({
            reload: false,
            close: false,
            editTitle: false
        });
    });
</script>
<script>
    $(document).ready(function () {
        // 控制面板初始化（可选）
        $('#lobipanel-custom-control').lobiPanel({
            reload: false,
            close: false,
            editTitle: false
        });

        // 点击返回按钮
        $('#back').click(function () {
            history.back();
        });

        // 提交按钮事件（multipart/form-data 提交 + Base64 图片存数据库）
        $('#btnSubmit').click(function () {
            const file = $('#file')[0].files[0];
            if (!file) {
                alert('请上传照片');
                return;
            }

            const formData = new FormData($('#teacherForm')[0]); // 包含所有表单项和文件

            $.ajax({
                type: 'POST',
                url: '/api/v1/manager/teacher/save-multipart', // ✅ 注意：这个路径要和你 Controller 中一致
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.code === 200) {
                        alert('教师添加成功');
                        location.href = '/teacher/'; // 添加成功后跳转
                    } else {
                        alert('添加失败：' + res.message);
                    }
                },
                error: function () {
                    alert('请求失败');
                }
            });
        });

        // 图片预览功能（选中图片后立即预览）
        $('#file').change(function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    $('#img_pre').show();
                    $('#img_pre').attr('src', e.target.result); // 显示预览图片
                };
                reader.readAsDataURL(file);
            }
        });
    });
</script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
	<h3>&copy; 版权所有 | </h3>
</div>
</body>

</html>